{% extends 'myhome/blank.html' %}
{% block con %}
<title>商品详情页</title>
<div id="breadcrumb">
    <div class="container">
        <ul class="breadcrumb">
            <li><a href="{% url 'myhome_index' %}">首页</a></li>
            <li class="active">图书详情</li>
        </ul>
    </div>
</div>
<!-- section -->
<div class="section">
    <!-- container -->
    <div class="container">
        <!-- row -->
        <div class="row">
            <!--  Product Details -->
            <div class="product product-details clearfix">
                <div class="col-md-6">
                    <div id="product-main-view">
                        <div class="product-view">
                            <img src="/{{img_url}}" style="max-width: 400px; min-width: 350px; max-height: 760px;"
                                 alt="">
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="product-body">
                        <h3 class="product-name">{{ title }}</h3>
                        <hr>
                        <p><strong>作者:</strong>
                            {{author}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>出版社:</strong>
                            {{publisher}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>出版时间:</strong>
                            {{pub_date}}</p>
                        <p><strong>国际标准书号ISBN:&nbsp;&nbsp;&nbsp;&nbsp;</strong>{{isbn}}</p>
                        <hr>
                        <h3 class="product-price">￥ {{ price }} &nbsp;&nbsp;&nbsp;&nbsp;<del class="product-old-price">￥
                            45.00
                        </del>
                        </h3>
                        <hr>
                        <div>
                            <div class="product-rating">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-o empty"></i>
                            </div>
                            <a href="#">评论条数（3） / 添加评论</a>
                        </div>
                        <p><strong>库存:</strong> {{num}}</p>
                        <p><strong>图书简介:</strong></p>
                        <p>{{ tuijian }}</p>
                        <br>
                        <hr>
                        <div class="product-btns">
                            <div class="qty-input">
                                <span class="text-uppercase">数量: </span>
                                <input class="input" name="num" type="number" min="1" value="1">
                                <input type="hidden" name="bid" value="{{book.id}}">
                            </div>
                            <a id="addcart" class="primary-btn add-to-cart" href="javascript:void(0)"><i
                                    class="fa fa-shopping-cart"></i> 加入购物车</a>
                            <div class="pull-right">
                                <button class="main-btn icon-btn"><i class="fa fa-heart"></i></button>
                                <button class="main-btn icon-btn"><i class="fa fa-exchange"></i></button>
                                <button class="main-btn icon-btn"><i class="fa fa-share-alt"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="product-tab">
                        <ul class="tab-nav">
                            <li><a data-toggle="tab" href="#tab2" aria-expanded="true">商品评论 (3)</a></li>
                        </ul>
                        <div class="tab-content">
                            <div id="tab2" class="tab-pane fade in">

                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="product-reviews">
                                            <div class="single-review">
                                                <div class="review-heading">
                                                    <div><a href="#"><i class="fa fa-user-o"></i> 小明</a></div>
                                                    <div><a href="#"><i class="fa fa-clock-o"></i>2021年11月21日 /
                                                        晚上8:30</a></div>
                                                    <div class="review-rating pull-right">
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star-o empty"></i>
                                                    </div>
                                                </div>
                                                <div class="review-body">
                                                    <p>痛苦本身很重要，成为一个笨蛋，逃避足球的痛苦，没有结果。</p>
                                                </div>
                                            </div>

                                            <div class="single-review">
                                                <div class="review-heading">
                                                    <div><a href="#"><i class="fa fa-user-o"></i> 小明</a></div>
                                                    <div><a href="#"><i class="fa fa-clock-o"></i> 2021年11月21日 /
                                                        晚上8:00</a></div>
                                                    <div class="review-rating pull-right">
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star-o empty"></i>
                                                    </div>
                                                </div>
                                                <div class="review-body">
                                                    <p>痛苦本身很重要，成为一个笨蛋，逃避足球的痛苦，没有结果。</p>
                                                </div>
                                            </div>

                                            <div class="single-review">
                                                <div class="review-heading">
                                                    <div><a href="#"><i class="fa fa-user-o"></i> 小明</a></div>
                                                    <div><a href="#"><i class="fa fa-clock-o"></i> 2021年11月21日 /
                                                        晚上7:00</a></div>
                                                    <div class="review-rating pull-right">
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star-o empty"></i>
                                                    </div>
                                                </div>
                                                <div class="review-body">
                                                    <p>痛苦本身很重要，成为一个笨蛋，逃避足球的痛苦，没有结果。</p>
                                                </div>
                                            </div>

                                            <ul class="reviews-pages">
                                                <li class="active">1</li>
                                                <li><a href="#">2</a></li>
                                                <li><a href="#">3</a></li>
                                                <li><a href="#"><i class="fa fa-caret-right"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <h4 class="text-uppercase">写你的评论</h4>
                                        <p>您的电子邮件地址不会被公开。</p>
                                        <form class="review-form">
                                            <div class="form-group">
                                                <input class="input" type="text" placeholder="请输入名字"/>
                                            </div>
                                            <div class="form-group">
                                                <input class="input" type="email" placeholder="请输入电子邮件地址"/>
                                            </div>
                                            <div class="form-group">
                                                <textarea class="input" placeholder="你的见意"></textarea>
                                            </div>
                                            <div class="form-group">
                                                <div class="input-rating">
                                                    <strong class="text-uppercase">你的评分： </strong>
                                                    <div class="stars">
                                                        <input type="radio" id="star5" name="rating" value="5"/><label
                                                            for="star5"></label>
                                                        <input type="radio" id="star4" name="rating" value="4"/><label
                                                            for="star4"></label>
                                                        <input type="radio" id="star3" name="rating" value="3"/><label
                                                            for="star3"></label>
                                                        <input type="radio" id="star2" name="rating" value="2"/><label
                                                            for="star2"></label>
                                                        <input type="radio" id="star1" name="rating" value="1"/><label
                                                            for="star1"></label>
                                                    </div>
                                                </div>
                                            </div>
                                            <button class="primary-btn">Submit</button>
                                        </form>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Product Details -->
        </div>
        <!-- /row -->
    </div>
    <!-- /container -->
</div>
<!-- /section -->

<!-- section -->
<div class="section">
    <!-- container -->
    <div class="container">
        <!-- row -->
        <div class="row">
            <!-- section title -->
            <div class="col-md-12">
                <div class="section-title">
                    <h2 class="title">为你挑选</h2>
                </div>
            </div>
            <!-- section title -->

            <!-- Product Single -->
            {% for i in bs %}
            <div class="col-md-3 col-sm-6 col-xs-6">
                <div class="product product-single">
                    <div class="product-thumb">
                        <img src="/{{ i.bookimgs_set.first.img_url }}"
                             style="max-width: 150px; max-height: 200px;" alt="{{i.title}}">
                    </div>
                    <div class="product-body">
                        <h3 class="product-price">￥ {{ i.price }} </h3>
                        <div class="product-rating">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o empty"></i>
                            <i class="fa fa-star-o empty"></i>
                        </div>
                        <h2 class="product-name"><a href="#">{{i.title}}</a></h2>
                        <div class="product-btns">
                            <button class="main-btn icon-btn"><i class="fa fa-heart"></i></button>
                            <button class="main-btn icon-btn"><i class="fa fa-exchange"></i></button>
                            <button class="primary-btn add-to-cart"><i class="fa fa-shopping-cart"></i> 加入购物车</button>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
            <!-- /Product Single -->
        </div>
        <!-- /row -->
    </div>
    <!-- /container -->
</div>
<!-- /section -->
<script src="/static/myhome/assets/js/jquery-1.12.4.min.js"></script>

<script>

	// 绑定单击事件
	$('#addcart').click(function () {
		var user = '{{request.session.VipUser.id}}'
		if (user) {
			var data = {}
			data.bid =  '{{ pid }}'
			data.num = $(this).parents().find('input[type=number]').val();

			$.post("{% url 'myhome_add' %}", data, function (data) {
				console.log(data)
			}, 'json')

		} else {
			alert('请先登录');
			location.href = "{% url 'myhome_login' %}?nextpath={{request.path}}"
		}
		// console.log(user, typeof (user))
	});

</script>
{% endblock %}